<template>
    <div>
        <h2>用户分级设置</h2>
        <template v-if="Object.keys(value).length">
            <el-button class="right" size="small" @click="Log">变动日志</el-button>
            <el-button class="right" type="primary" size="small" @click="Save">保存</el-button>
        </template>
        <div v-for="(item,key) in value" :key="key" class="content">
            <h3>{{ key.substr(-1) }}: {{ titleMap[key.substr(-1)] }}</h3>
            <div class="betwe">
                <template v-for="(v,i) in item">
                    <ipt :key="i" v-model="inputDatum[key][i]" @change="Format(key)" />{{ i==item.length-1?'':'~' }}
                </template>
            </div>
            <div class="tips betwe">
                <span v-for="(v,i) in sendDatum[key]" :key="key+i">
                    {{ key.substr(-1) + (i+1) }}: {{ v }}
                </span>
            </div>
        </div>
    </div>
</template>

<script>
/*
    1. 上层传入value,监听器解析value,生成输入列表inputDatum和页面
    2. 页面输入框绑定inputDatum
    3.input的change事件触发inputDatum排序,然后赋值给source
    4. 提交数据直接遍历source

*/
export default {
    components: {
    },
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            source: this.value,
            // 输入框
            inputDatum: {},
            titleMap: { R: '最近一次登录', F: '一个月内登陆次数', C: '一个月内产生内容数量', M: '一个月内消费金额' }
        }
    },
    computed: {
        sendDatum () {
            const obj = this.inputDatum
            const _arr = {}
            for (const key in obj) {
                _arr[key] = obj[key].map((v, i) => {
                    const _next = obj[key][i + 1] - 1 || '以上'
                    return `${v}-${_next}`
                })
            }
            return _arr
        }
    },
    watch: {
        value: {
            // deep: true,
            immediate: true,
            handler (val) {
                this.source = val
                const _inputDatum = {}
                for (const key in val) {
                // item是数组
                    const item = val[key]
                    _inputDatum[key] = item.map(v => v.paramValue)
                }
                // 生成输入数组
                this.inputDatum = _inputDatum
            }
        }

    },
    created () {
    },
    mounted () {

    },
    methods: {
        Format (key) {
            const arr = this.inputDatum[key]
            // input的change事件触发排序
            arr.sort((a, b) => a - b)
            const _targetArr = this.source[key]
            // 排序后赋值给source
            arr.forEach((v, i) => {
                _targetArr[i].paramValue = v
            })
        },
        Log () {
            this.$emit('click', 'log', 'level')
        },
        Save () {
            if (!Object.keys(this.sendDatum).length) {
                return this.$message.error('数据异常,无法保存')
            }
            const data = []
            for (const key in this.source) {
                const _arr = this.source[key].map((v, i) => {
                    return {
                        uid: v.uid,
                        paramType: 'level',
                        paramName: v.paramName,
                        paramValue: this.sendDatum[key][i].replace('以上', 'Infinity')
                    }
                })
                data.push(..._arr)
            }
            this.$emit('click', 'save', data, 'level')
        }
    }
}
</script>

<style scoped lang="stylus">
@import '../styl/public.styl'
.tips
    margin-top 20px
    span
        display inline-block
        padding 7px 20px
        background #f9f9f9
        border-radius 20px
</style>
